<template>
  <div class="prescriptionAmount-page">
    <!-- 头部信息 -->
      <header>
        <div class="filter-part">
          <div class="filter-item">
            <label>药店名称：</label>
            <Select v-model="filterObj.pharmacyId" :key="filterObj" clearable placeholder = '全部' filterable style="width:200px">
                <Option v-for="item in storeList" :value="item.id" :key="item.id">{{ item.orgName }}</Option>
            </Select>
          </div>
          <div class="filter-item">
            <label>选择日期：</label>
            <DatePicker v-model="filterObj.fromTime"/>
            <span style="lineHeight: 2; padding: 0 5px">~</span>
            <DatePicker v-model="filterObj.endTime"/>
          </div>
          <div class="filter-btn-group">
            <Button style="width:75px;height:35px;" type="primary" icon="ios-search" @click="findPdJeNumber()">查询</Button>
            <Button style="width:75px;height:35px;" @click="reset" icon="icon-gengxin">
              <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>重置
            </Button>
          </div>
        </div>
      </header>
      <div class="center-block">
        <div class="block-item">
          <div class="title">总订单数</div>
          <div class="count">{{resObj.orderTotalNumber}}</div>
        </div>
        <div class="block-item">
          <div class="title">物流配送</div>
          <div class="count">{{resObj.logisticsNumber}}</div>
        </div>
        <div class="block-item">
          <div class="title">药店自取</div>
          <div class="count">{{resObj.inviteNumber}}</div>
        </div>
        <div class="block-item">
          <div class="title">订单总金额</div>
          <div class="count">{{resObj.orderTotalJeNumber?resObj.orderTotalJeNumber:0}}元</div>
        </div>
      </div>
      <div class="chatsty">
        <basicChart :chartOption="chartOption" v-if="line"/>
        <p v-if="!line">暂无相关数据</p>
      </div>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import { DatePicker } from "view-design";
import basicChart from "@/components/echarts/basicChart";
import Utils from '../../../utils';
const filterObj = {
  pharmacyId: null,
  fromTime: moment().subtract(1, 'months').format('YYYY-MM-DD'),
  endTime: moment().format('YYYY-MM-DD')
};
export default {
  components: {
    basicChart,
    DatePicker
  },
  created() {
    let breadList = [
        { path: "/index", title: "首页" },
        {
            path: "",
            title: "统计分析"
        },
        {
            path: "/index/operation/statisticAnalysis/prescriptionMoney/index",
            title: "药品综合统计分析"
        }
    ];
    this.$emit("changeBreadList", breadList);
  },
  data() {
    return {
      line:false,
      filterObj: this.deepClone(filterObj),
      resObj: {},
      chartOption: {
        color: ['#46C67F', '#ff6367','#e6be72','#2367f0'],
        legend: {
            // x: 50,
            // top: '7%',
            textStyle: {
                // color: '#ffd285',
            },
            data: ['配送订单量', '自取订单量','配送订单金额','自取订单金额',]
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(0, 255, 233,0)'
                        }, {
                            offset: 0.5,
                            color: 'rgba(255, 255, 255,1)',
                        }, {
                            offset: 1,
                            color: 'rgba(0, 255, 233,0)'
                        }],
                        global: false
                    }
                },
            },
        },
        grid: {
            top: '15%',
            left: '5%',
            right: '5%',
            bottom: '15%',
            // containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                show: true
            },
            splitArea: {
                // show: true,
                color: '#f00',
                lineStyle: {
                    color: '#f00'
                },
            },
            axisLabel: {
                color: '#000'
            },
            splitLine: {
                show: false
            },
            boundaryGap: false,
            data: [],

        }],
        yAxis: [
            {
              type: 'value',
              name: '订单单位：个',
              min: 0,
              max: 10,
              interval:2,
              axisTick: {
                  show: false
              },
              axisLabel: {
                  textStyle: {
                      color: '#556677'
                  },
                  formatter: '{value}'
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      // color: '#DCE2E8'
                      color: '#999'
                  }
              },
              splitLine: {
                  show: false
              }
            },
            {
              type: 'value',
              name: '金额单位：元',
              min: 0,
              max: 1,
              interval:0.2,
              position: 'right',
              axisTick: {
                  show: false
              },
              axisLabel: {
                  textStyle: {
                      color: '#556677'
                  },
                  formatter: '{value}'
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: '#999'
                  }
              },
              splitLine: {
                  show: false
              }
        }],
        series: [
            {
                name: '配送订单量',
                type: 'line',
                showAllSymbol: true,
                lineStyle: {
                    normal: {
                        color: "#00ca95",
                    },
                },
                // areaStyle: {
                //     normal: {
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //                 offset: 0,
                //                 color: 'rgba(0,202,149,0.3)'
                //             },
                //             {
                //                 offset: 1,
                //                 color: 'rgba(0,202,149,0)'
                //             }
                //         ], false),
                //         shadowColor: 'rgba(0,202,149, 0.9)',
                //         shadowBlur: 20
                //     }
                // },
                data: [],
            },
            {
                name: '自取订单量',
                type: 'line',
                showAllSymbol: true,
                lineStyle: {
                    normal: {
                      color: "#ff6367",
                    },
                },
                // areaStyle: {
                //     normal: {
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //                 offset: 0,
                //                 color: 'rgba(255,72,74,0.5)'
                //             },
                //             {
                //                 offset: 1,
                //                 color: 'rgba(255,72,74,0)'
                //             }
                //         ], false),
                //         shadowColor: 'rgba(108,80,243, 0.9)',
                //         shadowBlur: 20
                //     }
                // },
                data: []
            },
            {
                name: '配送订单金额',
                type: 'line',
                showAllSymbol: true,
                lineStyle: {
                    normal: {
                      color: "#e6be72",
                    },
                },
                data: []
            },
            {
                name: '自取订单金额',
                type: 'line',
                showAllSymbol: true,
                lineStyle: {
                    normal: {
                      color: "#2367f0",
                    },
                },
                data: []
            },
        ]
      },
      storeList: []
    }
  },
  mounted() {
    this.findPdJeNumber();
    this.pharmacyInfo();
  },
  methods: {
    reset() {
      this.filterObj = this.deepClone(filterObj);
      this.findPdJeNumber();
    },
    findPdJeNumber() {
      const params = this.deepClone(this.filterObj);
      console.log(params)
      // params.hospitalId = params.docInfo[0];
      // params.deptType = params.docInfo[1];
      // params.doctorId = params.docInfo[2];
      // delete params.docInfo;
      params.fromTime = Utils.getNowDateBySpecialFormat(this.filterObj.fromTime);
      params.endTime = Utils.getNowDateBySpecialFormat(this.filterObj.endTime);
      params.pharmacyId = params.pharmacyId
      console.log(JSON.stringify(params));
      this.modalTableLoading = true;
      this.$axios
        .post(api.getPdJeNumber, params)
        .then(res => {
          if (res.data.code === 1) {
            let ret = res.data.object;
            this.resObj = ret;
            if(this.resObj.rtMap){
              this.line = true
              this.chartOption.xAxis[0].data = this.resObj.rtMap.datearr;
              this.chartOption.series[0].data = this.resObj.rtMap.wlarr;
              this.chartOption.series[1].data = this.resObj.rtMap.zqarr;
              this.chartOption.series[2].data = this.resObj.rtMap.wlMoneyarr;
              this.chartOption.series[3].data = this.resObj.rtMap.zqMoneyarr;
            }else{
              this.line = false
            }
          } else {
            this.$Message.info(res.data.message);
          }
          this.modalTableLoading = false;
        })
        .catch(() => {
          this.modalTableLoading = false;
        });
    },
    pharmacyInfo() {
      this.$axios.post(api.mechanismregList, {pageNo: 1, pageSize: 9999,hospitalType: 2}).then(res => {
          if (res.data.code === 1) {
              this.storeList = res.data.object.records;
          }
      });
    },
    deepClone(obj) {
        return JSON.parse(JSON.stringify(obj))
    },
  },
  watch: {
    docInfo: {
      handler(n) {
        console.log(n);
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
.prescriptionAmount-page {
    width: 98%;
    min-width: 1200px;
    padding: 10px;
    margin-left: 1%;
    margin: 0 auto;
    background: #fff;
    .filter-part {
      display: flex;
      flex-wrap: wrap;
      .filter-item {
        display: flex;
        margin: 10px 10px 10px 0;
        line-height: 32px;
        label {
          white-space: nowrap;
          line-height: 32px;
          padding-left: 5px;
          text-align: right;
        }
        .input {
          width: 220px;
        }
        .select {
          width: 70px;
        }
        .content {
          padding-right: 5px;
        }
      }
      .filter-btn-group {
        margin: 10px 10px 10px 0;
        flex: 0 0 auto;
      }
    }
    .center-block {
      margin: 20px 0;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: space-around;
      .block-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 18%;
        height: 150px;
        border:1px solid rgba(228,231,237,1);
        box-shadow:0px 2px 12px 0px rgba(0, 0, 0, 0.06);
        font-weight: 600;
        .title {
          font-size: 14px;
        }
        .count {
          padding-top: 10px;
          font-size: 24px;
        }
      }
    }
    .chatsty{
        width: 100%; 
        height: 400px;
        margin-top:30px;
        p{
          text-align: center;
          margin-top: 10%;
          font-size: 16px;
        }
        img{
          width: 50px;
          height: 50px;
        }
    }
}
</style>
